<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>党员管理</el-breadcrumb-item>
            <el-breadcrumb-item>党员筛选</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="24" style="margin-bottom: 10px">
                <el-col :span="1"><el-button type="text" style="color: black">专业</el-button></el-col>
                <el-col :span="7">
                    <el-select style="width: 100%" v-model.number="filterInfo.major_id" filterable placeholder="请选择专业">
                        <el-option v-for="item in majorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black">年级</el-button></el-col>
                <el-col :span="3">
                    <el-select v-model="filterInfo.grade_name" filterable placeholder="请选择年级">
                        <el-option v-for="item in gradeList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black">学年</el-button></el-col>
                <el-col :span="6">
                    <el-select v-model="filterInfo.semester_ids" placeholder="请选择" filterable>
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="(item, key) in school_year_map" :key="key" :label="key" :value="item"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="5">
                    <el-button plain type="primary" @click="handleDownload" :loading="downloadLoading">导出 Excel <i class="el-icon-download el-icon--right"></i></el-button>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="2" style="padding-right: 0">
                    <el-button type="text" style="color: black">是否挂科</el-button>
                </el-col>
                <el-col :span="3" style="padding-left: 0">
                    <el-button plain type="primary" icon="el-icon-success">过滤挂科</el-button>
<!--                    <el-checkbox v-model="filterInfo.filterFail" label="过滤挂科" border></el-checkbox>-->
                </el-col>
                <el-col :span="2" style="padding-right: 0">
                    <el-button type="text" style="color: black">年龄限制</el-button>
                </el-col>
                <el-col :span="3" style="padding-left: 0">
                    <el-button plain type="primary" icon="el-icon-success">19岁以上</el-button>
<!--                    <el-checkbox v-model="filterInfo.filterAge" label="19岁以上" border></el-checkbox>-->
                </el-col>
                <el-col :span="2" style="padding-right: 0">
                <el-button type="text" style="color: black">申请时间</el-button>
                </el-col>
                <el-col :span="3" style="padding-left: 0">
                    <el-button plain type="primary" icon="el-icon-success">满一年以上</el-button>
<!--                    <el-checkbox v-model="filterInfo.filterApplyTime" label="满一年以上" border></el-checkbox>-->
                </el-col>
                <el-col :span="2" style="padding-right: 0">
                    <el-button type="text" style="color: black">成绩排名</el-button>
                </el-col>
                <el-col :span="3" style="padding-left: 0">
                    <el-select v-model.number="filterInfo.rank" filterable placeholder="请选择">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in rankList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" icon="el-icon-search" @click="getFilterStudents">查询</el-button>
                </el-col>
            </el-row>

            <el-table
                    max-height="600px"
                    :data="scoreList"
                    border stripe
                    :header-cell-style="table_header"
                    empty-text="暂无数据"
            >
                <el-table-column type="index" label="排名" align="center" width="60px"></el-table-column>
                <el-table-column prop="stu_id" label="学号" align="center" width="120px"></el-table-column>
                <el-table-column prop="name" label="姓名" align="center" width="100px"></el-table-column>
                <el-table-column prop="mean" label="均分" align="center" width="100px"></el-table-column>
                <el-table-column prop="total" label="总分" align="center" width="100px"></el-table-column>
                <el-table-column prop="class_name" label="班级" align="center" width="100px"></el-table-column>
                <el-table-column label="专业" align="center" width="220px">
                    <template>{{majorMap[filterInfo.major_id]}}</template>
                </el-table-column>
                <el-table-column prop="school_year" label="学年" align="center" width="150px"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                filterInfo: {
                    grade_name: "2018级",
                    major_id: 1,
                    semester_ids: '5-6',
                    filterFail: true,
                    rank: 0.4,
                    filterAge: true,
                    filterApplyTime: true,
                },

                majorList: [],
                gradeList: [],
                scoreList: [],
                majorMap: {},
                school_year_map: {},
                rankList: [
                    {'label': '前20%', 'value': 0.2},
                    {'label': '前30%', 'value': 0.3},
                    {'label': '前35%', 'value': 0.35},
                    {'label': '前40%', 'value': 0.4},
                ],
                filename: '党员筛选结果',
                downloadLoading: false,
            }
        },
        created() {
            this.getData();
        },
        methods: {
            table_header(row, column, rowIndex, columnIndex) {
                return 'background-color: #409EFF; color:white'
            },
            handleSizeChange(newSize) {
                this.filterInfo.pageSize = newSize;
                this.getFilterStudents();
            },
            handleCurrentChange(newNum) {
                this.filterInfo.pageNum = newNum;
                this.getFilterStudents();
            },
            handleDownload() {
                this.downloadLoading = true;
                import('@/vendor/Export2Excel').then(excel => {
                    const tHeader = ['学号', '姓名', '均分', '总分', '班级', '学年'];
                    const filterVal = ['stu_id', 'name', 'mean', 'total', 'class_name', 'school_year'];
                    const list = this.scoreList;
                    const data = this.formatJson(filterVal, list)
                    excel.export_json_to_excel({
                        header: tHeader,
                        data,
                        filename: this.filename,
                        autoWidth: true,
                        bookType: 'xlsx',
                    });
                    this.downloadLoading = false
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => { return v[j] })
                )
            },
            async getData(){
                await this.getSemesterList();
                await this.getMajorMap();
                await this.getMajorList();
                await this.getGradeList();
            },

            async getMajorMap() {
                const { data: res, status: status } = await this.axios.get('major/getMajorMap');
                if (status !== 200) {
                    return this.$message.error('获取班级列表失败！')
                }
                this.majorMap = res.data;
            },

            async getSemesterList() {
                const {data: res, status: status} = await this.axios.get("semester/getSchoolYearList");
                if (status !== 200) {
                    return this.$message.error('获取学期列表失败！')
                }
                for (var key in res.data){
                    this.school_year_map[key] = res.data[key].join('-');
                }
            },

            async getGradeList(){
                const {data: res, status: status} = await this.axios.get("grade/getRoleGrade");
                if (status !== 200) {
                    return this.$message.error('获取专业列表失败！')
                }
                this.gradeList = res.data;
                // this.filterInfo.grade_name = this.gradeList.slice(-1)[0];
            },

            async getMajorList(){
                const {data: res, status: status} = await this.axios.get("major/getRoleMajor");
                if (status !== 200) {
                    return this.$message.error('获取专业列表失败！')
                }
                this.majorList = res.data;
                this.filterInfo.major_id = this.majorList.slice(0)[0].id;
            },

            async getFilterStudents() {
                const {data: res, status: status} = await this.axios.get('party/getFilterStudents', {params: this.filterInfo});
                if (status !== 200) return this.$message.error("获取成绩列表失败");
                this.scoreList = res.data;
            },
        },
    }
</script>
<style lang="less" scope>
</style>